
<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="header">
      <h2>居民死亡医学证明（推断）书</h2>
    </div>
    <!-- 省份/城市/县区 -->
    <div class="admin-info">
      <div class="form-row">
        <div class="form-col">
          <label><span>{{ proof.province }}</span>省（自治区、直辖市）</label>
          <label><span>{{ proof.city }}</span>市（地区、州、盟）</label>
          <label><span>{{ proof.county }}</span>县（区、旗）</label>
        </div>
      </div>

      <div class="form-row">
        <div class="form-col">
          <label>行政区划代码
            <div class="grid-container">
              <div v-for="(item,index) in proof.regionCode" :key="index" class="grid-item">{{ item }}</div>

            </div>
          </label>
          <label style="float: right;">编号
            <div class="grid-container">

              <div v-for="(item,index) in proof.certificateId" :key="index" class="grid-item">{{ item }}</div>

            </div>
          </label>
        </div>
      </div>
    </div>

    <!-- 个人信息表格 -->
    <div class="table-wrapper">
      <div class="vertical-label">第一联  填写单位存根</div>
      <table>
        <tr>
          <th style="width: 13%">死者姓名</th>
          <td style="width: 16%"><div class="form-field">{{ proof.deceasedName }}</div></td>
          <th style="width: 10%">性别</th>
          <td style="width: 20%"><div class="form-field">{{ proof.gender }}</div></td>
          <th style="width: 10%">民族</th>
          <td style="width: 13%"><div class="form-field">{{ proof.ethnicity }}</div></td>
          <th style="width: 12%">国家或地区</th>
          <td style="width: 11%" colspan="2"><div class="form-field">{{ proof.country }}</div></td>
        </tr>
        <tr>
          <th>有效身份<br>证件类别</th>
          <td><div class="form-field">{{ proof.idType }}</div></td>
          <th>证件号码</th>
          <td>{{ proof.idNumber }}</td>
          <th>年龄</th>
          <td><div class="form-field">{{ proof.age }}岁</div></td>
          <th>婚姻状况</th>
          <td colspan="2"><div class="form-field">{{ proof.maritalStatus }}</div></td>
        </tr>
        <tr>
          <th>出生日期</th>
          <td><div class="form-field">{{ proof.birthDate }}</div></td>
          <th>文化程度</th>
          <td><div class="form-field">{{ proof.education }}</div></td>
          <th>个人身份</th>
          <td colspan="4"><div class="form-field">{{ proof.occupation }}</div></td>
        </tr>
        <tr>
          <th>死亡日期</th>
          <td><div class="form-field">{{ proof.deathDate }} {{ proof.deathTime }}</div></td>
          <th>死亡地点</th>
          <td colspan="2"><div class="form-field">{{ proof.deathLocation }}</div></td>
          <th colspan="2">死亡时是否处于妊娠期或<br>妊娠终止后42天内</th>
          <td colspan="2"><div class="form-field">{{ proof.pregnancy }}</div></td>
        </tr>
        <tr>
          <th>生前工作单位</th>
          <td><div class="form-field">{{ proof.workplace }}</div></td>
          <th>户籍地址</th>
          <td colspan="2"><div class="form-field">{{ proof.registeredAddress }}</div></td>
          <th>常住地址</th>
          <td colspan="3"><div class="form-field">{{ proof.residentialAddress }}</div></td>
        </tr>
        <tr>
          <th>可联系的<br>家属姓名</th>
          <td><div class="form-field">{{ proof.familyName }}</div></td>
          <th>联系电话</th>
          <td colspan="2"><div class="form-field">{{ proof.familyPhone }}</div></td>
          <th>家属住址<br>或工作单位</th>
          <td colspan="3"><div class="form-field">{{ proof.familyWorkplace }}</div></td>
        </tr>
        <tr>
          <th colspan="2">致死的主要疾病诊断</th>
          <th colspan="4">疾病名称（勿填症状体征）</th>
          <th colspan="3">发病至死亡大概间隔时间</th>
        </tr>
        <tr>
          <td colspan="2"> I.（a）直接死亡原因</td>
          <td colspan="4"><div class="form-field">{{ proof.causeA }}</div></td>
          <td colspan="3"><div class="form-field">{{ proof.illnessDurationA }}</div></td>
        </tr>
        <tr>
          <td colspan="2">（b）引起（a）的疾病或情况</td>
          <td colspan="4"><div class="form-field">{{ proof.causeB }}</div></td>
          <td colspan="3"><div class="form-field">{{ proof.illnessDurationB }}</div></td>
        </tr>
        <tr>
          <td colspan="2">（c）引起（b）的疾病或情况</td>
          <td colspan="4"><div class="form-field">{{ proof.causeC }}</div></td>
          <td colspan="3"><div class="form-field">{{ proof.illnessDurationC }}</div></td>
        </tr>
        <tr>
          <td colspan="2">（d）引起（c）的疾病或情况</td>
          <td colspan="4"><div class="form-field">{{ proof.causeD }}</div></td>
          <td colspan="3"><div class="form-field">{{ proof.illnessDurationD }}</div></td>
        </tr>
        <tr>
          <td colspan="2">II. 其他疾病诊断（促进死亡，但与导致死亡无关的其他重要情况）</td>
          <td colspan="7"><div class="form-field">{{ proof.otherDisease }}</div></td>
        </tr>
        <tr>
          <th>生前主要疾病<br>最高诊断单位</th>
          <td colspan="4"><div class="form-field">{{ proof.diagnosisUnit }}</div></td>
          <th>生前主要疾病<br>最高诊断依据</th>
          <td colspan="3"><div class="form-field">{{ proof.diagnosisBasis }}</div></td>
        </tr>
        <tr>
          <td>医师签名</td>
          <td><div class="form-field">{{ proof.doctorSignature }}</div></td>
          <td colspan="3">医疗卫生机构盖章：<span>{{ proof.institution }}</span></td>
          <td colspan="4">填表日期：<span>{{ proof.issueDate }}</span></td>
        </tr>
        <tr>
          <td colspan="5">(以下由编码人员填写) 根本死亡原因： <span>{{ proof.rootCause }}</span></td>
          <td colspan="4"><div class="form-field">ICD编码：{{ proof.icdCode }}</div></td>
        </tr>
      </table>
    </div>
    <!-- 死亡调查记录 -->
    <div class="header">
      <h2>死亡调查记录</h2>
    </div>
    <table>
      <tr>
        <td colspan="9" class="signature-area">
          <p><strong>死者生前病史及症状体征：</strong></p>
          <div>{{ proof.medicalHistory }}</div>
          <p class="signature-line">以上情况属实，被调查者签字：<span><!-- {{ proof.investigatorName }} --></span></p>
          
        </td>
      </tr>
      <tr>
        <th colspan="1" style="width: 13%">被调查者<br>姓名</th>
        <td colspan="1"><div class="form-field">{{ proof.investigatorName }}</div></td>
        <th colspan="1">与死者关系</th>
        <td colspan="1"><div class="form-field">{{ proof.relationship }}</div></td>
        <th colspan="1">联系电话</th>
        <td colspan="1"><div class="form-field">{{ proof.investigatorPhone }}</div></td>
        <th colspan="1">联系地址<br>或工作单位</th>
        <td colspan="2"><div class="form-field">{{ proof.investigatorAddress }}</div></td>
      </tr>
      <tr>
        <th colspan="1">死因推断</th>
        <td colspan="3"><div class="form-field">{{ proof.deathInference }}</div></td>
        <th colspan="1">调查者签名</th>
        <td colspan="1"><div class="form-field">{{ proof.investigatorSignature }}</div></td>
        <th colspan="1">调查日期</th>
        <td colspan="2"><div class="form-field">{{ proof.signatureDate }}</div></td>
      </tr>
    </table>
    <!-- 备注信息 -->
    <div class="notes">
      <p>注：① 此表填写范围为在家、养老服务机构、其他场所正常死亡者；② 被调查者应为死者近亲或知情人；③ 调查时应出具以下资料：被调查者有效身份证件，居住地居委会或村委会证明，死者身份证和/或户口簿、生前病史卡。</p>
    </div>
    <!-- 操作按钮 -->
    <div class="controls">
      <button class="action-btn print-btn" onclick="window.print()">打印第一联
      </button>
      <button class="action-btn reset-btn" @click="toPage('remark',{id:proof.id})">打印说明
      </button>
      <button class="action-btn reset-btn" @click="toPage('print2',{id:proof.id})">第二联打印
      </button>
       
      <button class="action-btn reset-btn" @click="toPage('list',{id:proof.id})"> 返回列表
      </button>
    </div>
  </div>
</template>

<script>
import * as proofApi from '@/api/deathProof'
export default {
  name: 'Print1',
  data() {
    return {
      proof: {}
    }
  },
  mounted() {
    if (this.$route.query.id) {
      proofApi.get(this.$route.query.id).then(p => {
        this.proof = p.data
      })
    }
  },
  methods: {
    toPage(path, query) {
      this.$router.push({
        path: path,
        query: query
      })
    }

  }
}
function clearForm() {
  if (confirm('确定要清空所有表单内容吗？')) {
    document.querySelectorAll('.form-field').forEach(field => {
      field.textContent = ''
    })
  }
}
</script>
 <style scoped>

    /* 全局样式优化 */
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "SimSun", "仿宋", serif;
       background: linear-gradient(135deg, #e0f0ff, #f5f9ff);
      color: #000;
      padding: 20px;
      line-height: 1.6;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      padding: 30px;
      position: relative;
    }

    /* 标题区域样式 */
    .header {
      text-align: center;
      margin-bottom:5px;
	  font-weight: bold;
    }

    .header h2{
      margin: 20px 0 ;
      font-weight: bold;
      font-size: 24px;
     font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .title-note {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }

    /* 行政区域样式优化 */
    .admin-info {
/*      margin-bottom: 15px */;
      font-size: 12px;
    }

    .form-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .form-col {
      flex: 1;
    }

    .form-col label {
      display: inline-block;
    }

    .form-col span {
      font-weight: bold;
      display: inline-block;
      min-width: 40px;
      text-align: center;
      border-bottom: 1px solid #333;
      /* margin: 0 5px; */
      /* padding: 0 5px; */
    }

    /* 表格样式优化 */
    table {
      width: 100%;
      border-collapse: collapse;
      /* margin-bottom: 15px; */
      table-layout: fixed;
      font-size: 12px;
    }

    table, th, td {
      border: 1px solid #333;
      padding: 1px 5px;
    }

    th {
/*      background-color: #f5f5f5 */;
      text-align: center;
      font-weight: normal;
      line-height: 2;
    }

    td {
      vertical-align: middle;
      line-height: 1.7;
    }

    .form-field {
      min-height: 28px;
      display: flex;
      align-items: center;
      padding: 0 5px;
    }

    /* 部分标题样式 */
    .section-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }

    .section-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 10%;
      width: 80%;
      height: 1px;
      background: linear-gradient(to right, transparent, #333, transparent);
    }

    /* 备注区域样式 */
    .notes {
      margin-top: 15px;
      padding: 10px 15px;
      background-color: #f9f9f9;
      border: 1px solid #e0e0e0;
      font-size: 12px;
      line-height: 1.8;
    }

    .notes p {
      margin-bottom: 5px;
    }

    /* 按钮区域样式 */
    .controls {
      margin: 25px 0 15px;
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    button {
      padding: 8px 25px;
      background: #2c6aa0;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 14px;
      box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    }

    button:hover {
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* 打印样式优化 */
    @media print {
      @page {
		    /* 基础边距设置 - 适用于大多数文档 */
		    /*margin:25mm 0mm 1mm 10mm;  上下左右统一15毫米边距 */

		    /* 也可以单独设置各边距 */
		     margin-top: 0mm;
		     margin-bottom: 0mm;
		     margin-left: 10mm;
		     margin-right: 10mm;

		    /* 横向打印 */
		    /* size: A4 landscape; */
		  }
      body {
        padding: 0;
        background: white;
      }

      .container {
        box-shadow: none;
        padding: 15px;
        max-width: 100%;
      }

      .controls {
        display: none;
      }

      button {
        display: none;
      }

      .notes {
        border: none;
        background-color: transparent;
        padding: 5px 0;
      }
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }

      .form-row {
        flex-direction: column;
      }

      .controls {
        flex-direction: column;
        align-items: center;
      }
    }

    /* 特殊单元格样式 */
    .signature-area {
      padding: 10px;
      min-height: 80px;
    }

    .signature-line {
      float: right;
      padding: 20px 60px 0 0;
    }

    /* 增强可读性 */
    tr:nth-child(even) {
      /* background-color: #fafafa; */
    }

    td:empty::after {
      content: " ";
      display: inline-block;
      width: 100%;
    }
	/* 新增：第一联标签样式 */
	    .vertical-label {
	      position: absolute;
	      left: -20px;
	      top: 50%;
	      transform: translateY(-50%);
	      writing-mode: vertical-lr;
	      text-orientation: upright;
	      font-size: 12px;
	      white-space: nowrap;
		  letter-spacing: 5px;

	    }

	    /* 新增：表格容器样式 */
	    .table-wrapper {
	      position: relative;
	      margin-top: 5px;
	    }
		/* 新增：格子样式 */
		    .grid-container {
		      display: inline-flex;
		      gap: 2px;
		      margin-left: 5px;
		      vertical-align: middle;
		    }

		    .grid-item {
		      width: 15px;
		      height: 15px;
		      border: 1px solid #aaa;
		      text-align: center;
		      line-height: 15px;
		      display: inline-block;
		    }

			/**/
			.actions {
			    display: flex;
			    justify-content: center;
			    gap: 20px;
/* 			    background: #f9fbfd;
			    border-bottom: 1px solid #eaeaea; */
			}

			.action-btn {
			    padding: 12px 30px;
			    border: none;
			    border-radius: 30px;
			    font-weight: 500;
			    cursor: pointer;
			    display: flex;
			    align-items: center;
			    gap: 8px;
			    transition: all 0.3s ease;
			    font-size: 16px;
			    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

			}

			.print-btn {
			    background: linear-gradient(135deg, #ff9800, #f57c00);
			    color: white;
			}

			.reset-btn {
			    background: linear-gradient(135deg, #607d8b, #455a64);
			    color: white;
			}

			.submit-btn {
			    background: linear-gradient(135deg, #28a745, #218838);
			    color: white;
			}

			.action-btn:hover {
			    transform: translateY(-3px);
			    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
			}

  </style>
